<template>
  <view class="coupon-order-container">
    <view class="list" v-if="list.length">
      <view class="order" v-for="(item, index) in list" :key="index">
        <view class="title">{{ item.coupon_package_name }}</view>
        <view class="item flex flex-ai-c" @click="gotoOder(item.id)">
          <view class="color-999">关联订单：</view>
          <view class="pl-25 flex-1 s-line-text">{{ item.order_no }}</view>
          <u-icon name="arrow-right" color="#999" size="26rpx"></u-icon>
        </view>
        <view class="item flex flex-ai-c">
          <view class="color-999">核销时间：</view>
          <view class="pl-25 flex-1">{{
            item.usetime.replace(/\T/, ' ')
          }}</view>
        </view>
        <view class="item flex">
          <view class="color-999">核销项目：</view>
          <view class="pl-25 flex-1">
            <view
              v-for="(pItem, index1) in item.project"
              :key="index1"
              class="pb-25 flex flex-ai-c flex-jc-sb"
            >
              <view class="item-name">
                {{ pItem.coupon_name }}
              </view>
              <view>x1</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="list.length === 0 && showDefault">
      <default-img msg="暂无订单"></default-img>
    </view>
    
    <!-- 加载更多 -->
    <u-loadmore v-else :status="moreStatus" margin-bottom="20" />
  </view>
</template>
<script>
import defaultImg from '@/components/defaultImg/defaultImg' //默认图片组件

export default {
  components: {
    defaultImg, //默认图片组件
  },
  data() {
    return {
      showDefault: false, //是否显示缺省图
      list: [], // 列表数据
      pageIndex: 1, // 当前页码
      moreStatus: 'loadmore',
    }
  },

  mounted() {
    this.getList()
  },

  onReachBottom() {
    this.getMoreList()
  },

  methods: {
    // 获取优惠券核销列表
    async getOrderList(cb = function () {}) {
      try {
        let data = {
          pageIndex: this.pageIndex,
          pageSize: 10,
          storeid: uni.getStorageSync('userInfoDetail').store.storeId,
        }
        const res = await this.$api.afterSales.GetCouponCheckOrderList(data)
        this.list = [...this.list, ...res.data.list]
        this.pageIndex = res.data.pageIndex + 1
        this.moreStatus = res.data.list.length < 10 ? 'nomore' : 'loadmore'
        this.showDefault = this.list.length === 0
      } catch (e) {
        this.showDefault = this.list.length === 0 || false
      }
      cb()
    },

    // 带loading加载效果的请求列表
    getList() {
      uni.showLoading()
      this.getOrderList(() => {
        uni.hideLoading()
      })
    },

    // 下拉到底部加载更多的请求列表
    getMoreList() {
      if (this.moreStatus === 'nomore') return
      this.moreStatus = 'loading'
      this.$u.throttle(this.getOrderList, 800)
    },

    gotoOder(id) {
      uni.navigateTo({
        url: '/pages_afterSales/order/orderDetail/orderDetail?id=' + id,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  background: #f6f6f6;
}
.coupon-order-container {
  padding-bottom: 30rpx;
}
.list {
  padding: 20rpx 24rpx;

  .order {
    padding: 0 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      border-bottom: 2rpx solid #eee;
      height: 78rpx;
      line-height: 78rpx;
    }

    .item {
      padding-top: 27rpx;

      .pl-25 {
        box-sizing: border-box;
        padding-left: 25rpx;
      }

      .pb-25 {
        padding-bottom: 25rpx;
      }

      .item-name {
        width: 400rpx;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: normal;
      }
    }
  }
}
</style>
